<template>
  <div class="Tabbar">
    <van-tabbar
      @change="changeActive"
      v-model="active"
      active-color="#B99267"
      inactive-color="#B4B6BD"
    >
      <van-tabbar-item>
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon[0].active : icon[0].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>线上商城</span>
        <template #icon="props">
          <img :src="props.active ? icon[1].active : icon[1].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>线下商城</span>
        <template #icon="props">
          <img :src="props.active ? icon[2].active : icon[2].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon[3].active : icon[3].inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { tabbarType } from "@/types/types";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
@Component({})
export default class TabbarPage extends Vue {
  @Prop() propsActive!: number;
  private active: number = this.propsActive;
  private icon: tabbarType[] = [
    {
      active: require("@/assets/home1.png"),
      inactive: require("@/assets/home.png"),
    },
    {
      active: require("@/assets/OfflineMall1.png"),
      inactive: require("@/assets/OfflineMall.png"),
    },
    {
      active: require("@/assets/OnLineMall1.png"),
      inactive: require("@/assets/OnLineMall.png"),
    },
    {
      active: require("@/assets/my1.png"),
      inactive: require("@/assets/my.png"),
    },
  ];
  @Emit()
  changeActive(e: number): number {
    return e;
  }
}
</script>

<style lang="scss">
</style>